<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="阿福易购">
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <!-- uc、qq浏览器 -->
    <meta name="screen-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <meta name="HandheldFriendly" content="true">
    <meta name="MobileOptimized" content="320">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <meta name="keywords" content="{{$SEO['keywords']}}"/>
    <meta name="description" content="{{$SEO['description']}}"/>
    <title>个人中心_{{$SEO['title']}}</title>
    <link rel="stylesheet" href="{{ asset('/build/css/app.min.css') }}">
</head>
<body ontouchstart="">
<header class="ui-header ui-header-stable    af-header">
    <ul class="ui-row-flex">
        <li class="ui-col ui-flex ui-flex-pack-start">
            <i class="ui-icon-return af-icon-home" data-href="/user"></i>
        </li>
        <li class="ui-col ui-flex ui-flex-pack-center">
            <h1>我的收藏</h1>
        </li>
        <li class="ui-col ui-flex ui-flex-pack-end">

        </li>
    </ul>
</header>
@inject('pictureService','App\Interfaces\PictureService')
<div class="ui-container" >
    <div class="ui-tab ui-my-order-tab" id="tab1">

        <ul id="user_id" data-id="{{$user->id}}" data-type="{{$type}}" class="ui-tab-nav ui-border-b">
            <li onclick="window.location.href='/collection?type=GOODS'" @if($type=='GOODS') class="current" @endif>商品</li>
            <li onclick="window.location.href='/collection?type=SHOP'"  @if($type=='SHOP') class="current" @endif>店铺</li>
        </ul>

        <ul class="ui-tab-content" style="margin-top:10px;">
            <li>
                @if($type=="GOODS")
                <ul id="listWrap" class="fav-goods-list">
                    @foreach($paginate as $goods)
                    <li class="ui-border-tb">
                        <div data-href="/goods/show/{{$goods['goods_id']}}" class="ui-list-img ui-border">
                            <span style="background-image:url('{{$pictureService::thumb($goods['goods_thumb']),70,70}}')"></span>
                        </div>

                        <div class="ui-list-info">
                            <h4 data-href="/goods/show/{{$goods['goods_id']}}" class="ui-nowrap">{{$goods['goods_name']}}</h4>
                            <h5 class="subtitle ui-txt-muted ui-nowrap">{{$goods['goods_pet_name']}}</h5>
                            <h6><font class="price"> ¥{{$goods['shop_price']}} </font ><font class="market-price">¥{{$goods['market_price']}}</font></h6>
                        </div>

                    </li>
                    @endforeach

                </ul>
                @elseif($type=="SHOP")
                <ul class="fav-shop-list">
                    @foreach($paginate as $shop)
                    <li id="listWrap" class="ui-border-tb">

                        <div class="item">
                            <div data-href="/shop/{{$shop['id']}}" class="ui-list-img ui-border">
                                <span style="background-image:url('{{$pictureService::thumb($shop['shop_logo'])}}')"></span>
                            </div>
                        </div>

                        <div data-href="/shop/{{$shop['id']}}" class="item name ui-nowrap">{{$shop['shop_name']}}</div>
                        <div class=" item number">{{$shop['goodsNum']}}个商品</div>

                    </li>
                    @endforeach
                </ul>
                @endif
            </li>
        </ul>
        <div class="J-loading ui-loading-wrap af-hide">
            <p>正在加载中...</p>
            <i class="ui-loading"></i>
        </div>
    </div>

</div>
<footer>

</footer>

<script type="text/html" id="tpl">
    @if($type=="GOODS")
    <li class="ui-border-tb">
        <div data-href="/goods/show/${goods_id}" class="ui-list-img ui-border">
            <span style="background-image:url('${picHtml}')"></span>
        </div>

        <div data-href="/goods/show/${goods_id}" class="ui-list-info">
            <h4 class="ui-nowrap">${goods_name}</h4>
            <h5 class="subtitle ui-txt-muted ui-nowrap">${goods_pet_name}</h5>
            <h6><font class="price"> ¥${shop_price} </font ><font class="market-price">¥${market_price}</font></h6>
        </div>

    </li>
    @else($type=="SHOP")
    <li class="ui-border-tb">
        <div class="item">
            <div class="ui-list-img ui-border">
                ${picHtml}
            </div>
        </div>
        <div data-href="/shop/${id}" class="item name ui-nowrap">${shop_name}</div>
        <div class=" item number">${goodsNum}个商品</div>
        <div class=" item op">
            <i class="iconfont">&#xe643;</i>
        </div>
    </li>
    @endif
</script>
<script src="{{ asset('/build/lib/zepto.min.js') }}"></script>
<script src="{{ asset('/build/js/frozen.js') }}"></script>
<script src="{{ asset('/build/js/app.min.js') }}"></script>
<script>
    $(function () {
        var loading=$('.J-loading');
        var tpl=$('#tpl').html();
        var picTpl=$('#picTpl').html();
        var listWrap=$('#listWrap');
        var user_id=$('#user_id').attr('data-id');
        var type=$('#user_id').attr('data-type');
        var ajaxData={
            user_id:user_id,
            type:type,
            page:2,
            _token:_token
        };

        scrollLoading();

        function renderList(data) {
            var result=[];
            for(var i=0;i<data.length;i++){
                console.log(data[i].mobile_goods_thumb);
                if(data[i].mobile_goods_thumb){
                    data[i].picHtml=data[i].mobile_goods_thumb;
                }else{
                    data[i].picHtml='';
                }
                result.push(HtmlTemplate(tpl,data[i],true));
            }

            return result.join("");
        }

        function ajaxComment(data,callback) {

            $.ajax({url:'/collection/get',type:'post',dataType:'json',data:data,
                success:function (res) {
                    if(res.data.data.length){
                        typeof callback==='function'&&callback(res);
                    }else{
                        loading.hide();
                        topTip('收藏加载完成');
                    }

                },
                error:function (error,errorType) {
                    topTip(error.message,{type:'warn'});
                }
            });
        }
        function scrollLoading() {
            var body = $('body');
            DelCookie('scroll_loading');

            $(window).on('scroll',function () {
                var scrollTop=body.scrollTop();
                var winH=$(window).height();
                var docH=body.height();
                if(scrollTop+winH>docH-150&&!GetCookie('scroll_loading')){

                    //修改列表内容
                    loading.css({'display':'-webkit-box'});

                    SetCookie('scroll_loading',1);
                    var curTab=$('#tab1 .current');
                    ajaxData.condition=curTab.attr('data-type');
                    ajaxData.page=curTab.data('page')||2;
                    ajaxComment(ajaxData,function (res) {
                        if(res.data.data.length<6) loading.hide();
                        var newHtml=renderList(res.data.data);
                        listWrap.append(newHtml);
                        curTab.data('page',ajaxData.page+1);
                        DelCookie('scroll_loading');
                    });
                }
            });
        }
    });

</script>

</body>
</html>